<template>
  <div class="content">
    <!--结算币别列表弹窗-->
    <el-dialog
      v-dialogDrag
      title="现金流量指定项目"
      model
      :visible.sync="isCurrencyDialog"
      :close-on-click-modal="false"
      width="60%"
      top="5vh"
      :before-close="handleClose"
    >
      <div>
        <jc-table
          :table-data="tableData"
          :table-header="tableHeader"
          table-height="200px"
          serial
          @rowClick="rowClick"
        />
      </div>
      <div>
        <div style="margin: 10px 0 5px;">
          <el-button size="mini" @click="newly(1)">{{ $t('btn.newHang') }}<!--新增行--></el-button>
          <el-button size="mini" @click="newly(2)">{{ $t('btn.delHang') }}<!--删除行--></el-button>
        </div>
        <jc-table
          :table-data="tableData[index1].entry"
          :table-header="tableHeader2"
          table-height="250px"
          serial
          @rowClick="rowClick2"
        >
          <template v-slot:text1Slot="col">
            <el-select v-model="col.scope.row.subjectid" size="mini" @change="subjectHeadel(col.scope.row.subjectid, col.scope.$index)">
              <el-option v-for="item in projectVoucher" :key="item.subjectid" :label="item.fname" :value="item.subjectid" />
            </el-select>
          </template>
          <template v-slot:text2Slot="col">
            <el-input v-model="col.scope.row.cashflowmainor" size="mini">
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="handleMagnifier(1, col.scope.$index)"
              />
            </el-input>
          </template>
          <template v-slot:text3Slot="col">
            <el-input v-model="col.scope.row.cashflowsdor" size="mini">
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="handleMagnifier(2, col.scope.$index)"
              />
            </el-input>
          </template>
          <template v-slot:text4Slot="col">
            <el-input-number v-model="col.scope.row.amount" size="mini" />
          </template>
        </jc-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" @click="insertCash">{{ $t('btn.confirm') }}</el-button>
      </span>
    </el-dialog>
    <cashFlow v-if="cashVisable" :fid="fids" @cash="queryCash" />
  </div>
</template>
<script>
import {
  deleteCashFlowProjectDesign,
  queryCashFlowProjectDesignList,
  queryCashOtherProjectByVoucherId,
  queryCashProjectByVoucherId, updateCashFlowProjectDesign
} from '@/api/financial/voucher'

export default {
  components: {
    cashFlow: () => import('@/views/financial/voucherTemplate/certificateDetail/components/cashFlow')
  },
  props: {
    fid: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      fids: 1,
      cashVisable: false,
      isCurrencyDialog: true,
      tableData: [],
      tableHeader: [
        { label: this.$t('market.subjectNum'), prop: 'fnumber' },
        { label: this.$t('market.subjectName'), prop: 'fname' },
        { label: this.$t('market.currency2'), prop: 'flocalCurr' },
        { label: this.$t('market.direction'), prop: 'situation' },
        { label: this.$t('market.localCurr'), prop: 'amount' }
      ],
      projectVoucher: [],
      index1: 0,
      indexSelf: 0,
      tableData2: [],
      tableHeader2: [
        { label: '对方科目', type: 'text1', prop: 'subjectid' },
        { label: '主表项目', type: 'text2', prop: 'cashflowmainid' },
        { label: '附表项目', type: 'text3', prop: 'cashflowsdid' },
        { label: this.$t('market.localCurr'), type: 'text4', prop: 'amount' }
      ]
    }
  },
  created() {
    this.queryTBdCurrency()
    this.queryTBdCurrency1()
  },
  methods: {
    // 监听对方科目
    subjectHeadel(val, index) {
      this.projectVoucher.forEach(res => {
        if (res.subjectid === val) {
          this.tableData[this.index1].entry[index].otherdetailid = res.voucherdetailid
        }
      })
    },
    // 查询-对方科目
    async queryTBdCurrency1() {
      const DATA = { voucherId: this.fid }
      const { data: RES } = await queryCashOtherProjectByVoucherId(DATA)
      this.projectVoucher = RES
    },
    // 查询现金科目 第一个表格
    async queryTBdCurrency() {
      const DATA = { voucherId: this.fid }
      const { data: RES } = await queryCashProjectByVoucherId(DATA)
      this.tableData = RES
      this.rowClick(RES[0])
    },
    currencySearch() {
      this.currency.pageNum = 1
      this.queryTBdCurrency()
    },
    // 点击行
    async rowClick(row) {
      this.index1 = row.index || 0
      this.fsettlecurrid = row.flocalCurrId
      this.voucherdetailid = row.voucherdetailid
      const DATA = {
        voucherdetailid: row.voucherdetailid
      }
      if (this.tableData[this.index1].entry.length > 0) return
      const { data: RES } = await queryCashFlowProjectDesignList(DATA)
      this.tableData[this.index1].entry = RES
    },
    // 主表附表
    handleMagnifier(ev, index) {
      this.fids = ev
      this.indexSelf = index
      this.cashVisable = true
    },
    // 获取数据主表 附表
    queryCash(ev) {
      const item = this.tableData[this.index1].entry[this.indexSelf]
      if (ev?.fid && this.fids === 1) {
        item.cashflowmainid = ev.fid
        item.cashflowmainor = ev.fname
      } else if (ev?.fid && this.fids === 2) {
        item.cashflowsdid = ev.fid
        item.cashflowsdor = ev.fname
      }
      this.cashVisable = false
    },
    // 新增现金流量项目指定
    insertCash() {
      const DATA = {
        header: this.tableData
      }
      updateCashFlowProjectDesign(DATA).then(res => {
        if (res.code === 0) {
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 点击行2
    rowClick2(row) {
      this.indexSelf = row.index
      this.deleteCashFid = row.fid
    },
    // 新增行
    newly(ev) {
      const DATA = {
        fid: 0,
        cashflowmainor: '',
        cashflowsdor: '',
        cashflowmainid: '',
        cashflowsdid: '',
        fsettlecurrid: this.fsettlecurrid,
        amount: 0,
        subjectid: '',
        voucherdetailid: this.voucherdetailid,
        otherdetailid: ''
      }
      if (ev === 1) {
        this.tableData[this.index1].entry.push(DATA)
      } else {
        // const item = this.tableData[this.indexSelf].voucherdetailId
        // this.delArr.push(item)
        this.deleteCash()
      }
    },
    // 删除
    deleteCash() {
      const DATA = {
        ids: [this.deleteCashFid]
      }
      this.$confirm('确定要删除么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        deleteCashFlowProjectDesign(DATA).then(res => {
          if (res.code === 0) {
            this.tableData[this.index1].entry.splice(this.indexSelf, 1)
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      })
    },
    // 关闭前回调
    handleClose() {
      this.$emit('currency')
    }
  }
}
</script>
<style scoped lang="scss">
.content {
  @include listBom;
}
</style>

